<template>
  <div class="indication-base-info" v-if="info">
    <div class="section">
      <p class="section-title">指标信息：</p>
      <div class="section-content">
        <div class="field-item" v-if="info.pidName">
          <span class="label">一级指标：</span>
          <span class="val">{{ info.pidName }}</span>
          <span class="label">二级指标：</span>
          <span class="val">{{ info.indexName }}</span>
        </div>
        <div class="field-item" v-else-if="info.indexName">
          <span class="label">上级指标：</span>
          <span class="val">{{ info.indexName }}</span>
        </div>

        <!-- <div class="field-item" v-else>
          <span class="label">指标类别：</span>
          <span class="val">{{ info.indexName }}</span>
        </div> -->
        <div class="field-item">
          <span class="label">指标解释：</span>
          <span class="val">{{ info.describeInfo }}</span>
        </div>
        <div class="field-item" v-if="!isShare">
          <span class="label">推送周期：</span>
          <span class="val">{{ info.pushCycle | cycleDesc }}</span>
        </div>
      </div>
    </div>

    <div class="section">
      <p class="section-title" v-if="!isShare">推送要求：</p>
      <p class="section-title" v-else>共享数据：</p>
      <div class="section-content">
        {{ info.pushRequire }}
      </div>
    </div>
  </div>
</template>

<script>
import { IND_TYPE } from '@utility/dict'
import { pushCycleFilter } from '@controller/indication.js'

export default {
  name: 'IndBaseInfo',
  components: {},
  props: {
    info: { type: Object },
    type: { type: String, default: IND_TYPE.lznl },
    isShare: { type: Boolean },
    pidName: { type: String },
  },
  data() {
    return {
      IND_TYPE: IND_TYPE._define,
    }
  },
  filters: {
    cycleDesc(val) {
      return pushCycleFilter(val)
    },
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {},
}
</script>

<style lang="scss" scoped>
.indication-base-info {
  font-size: 16px;
  .section {
    &:not(:first-child) {
      margin-top: 20px;
    }
    .section-title {
      font-size: 18px;
      color: #333;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .section-content {
      background: #fff;
      padding: 16px 30px;
      line-height: 26px;
      border: 1px solid #ebeef5;
      .field-item {
        line-height: 26px;
        display: flex;
        &:not(:first-child) {
          margin-top: 10px;
        }

        .label {
          color: #333;
          font-weight: bold;
          &:not(:first-child) {
            margin-left: 20px;
          }
        }
        .val {
          color: #666;
          flex: 1;
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
